<template>
  <div class="project left">
    <el-row :gutter="20">
      <el-col
        class="el-col-pointer"
        :span="state.isMobileOrPc ? 24 : 12"
        v-for="(l, index) in state.list"
        :key="l._id"
        style="margin-bottom: 20px"
      >
        <a :href="l.url" target="_blank" rel="noopener noreferrer">
          <el-card shadow="hover">
            <img :src="l.img" class="image" />
            <div style="padding: 14px">
              <h4>{{ l.title }}</h4>
              <div class="content">{{ l.content }}</div>
              <span> {{ timestampToTime(l.start_time) }}-- </span>
              <span>
                {{ timestampToTime(l.end_time)}}
              </span>
            </div>
          </el-card>
        </a>
      </el-col>
    </el-row>
    <!-- <LoadingCustom v-if="state.isLoading"></LoadingCustom>
    <LoadEnd v-if="state.isLoadEnd"></LoadEnd> -->
  </div>
</template>

<script lang="ts" setup>
import {timestampToTime} from '../utils/utils'
import {GetProjectList} from '../api/api'
import {ProjectList,Params,ProjectsData} from '../type/index'
import {reactive,onMounted} from "vue"

const state=reactive({
      reverse: true,
      isLoadEnd: false,
      isLoading: false,
    //   isMobileOrPc: isMobileOrPc(),
      list: [] as ProjectList[],
      total: 0,
      params: {
        keyword: "",
        pageNum: 1,
        pageSize: 10,
      } as Params,
})
const handleSearch = async (): Promise<void> =>{
      state.isLoading = true;
      const res=await GetProjectList(state.params);
      const data = res.data
      state.isLoading = false;
      state.list = [...state.list, ...data.list];
      state.total = data.count;
      state.params.pageNum++;
      // if (state.total === state.list.length) {
      //   state.isLoadEnd = true;
      // }
}
onMounted(()=>{
  handleSearch();
    //  state.list = [
    //     {
    //       title: "oj-web",
    //       content: "这是一个基于vue2的oj系统",
    //       start_time: "2021-10-09",
    //       end_time: "2022-06-12",
    //       img: "12342",
    //       url: "123234",
    //       _id: "1",
    //     },
    //      {
    //       title: "后台管理系统",
    //       content: "这是一个基于vue2的oj系统",
    //       start_time: "2021-10-09",
    //       end_time: "2022-06-12",
    //       img: "12342",
    //       url: "123234",
    //       _id: "2",
    //     },
    //   ];
})
</script>

<style scoped lang="less">
.project {
  overflow: hidden;
  padding: 40px 0;
  .el-col-pointer {
    cursor: pointer;
  }
  .content {
    height: 70px;
    text-overflow: ellipsis;
  }
  .image {
    width: 100%;
    height: 250px;
  }
}
</style>